<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>账号设置 - 好运网</title>
    <link rel="stylesheet" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/center.css"/>
</head>
<body>

<div th:fragment="accountSetting">
    <link rel="stylesheet" href="/js/loading/loading.css">
    <script src="/js/loading/loading.js"></script>
    <script>
        var jiuXiuLoad = new Loading();
        jiuXiuLoad.init();

        function updateUserInfo() {
            jiuXiuLoad.start();
            $.ajax({
                method: "POST",
                url: "/api/updateUserInfo",
                data: $("#userForm").serializeArray(),
                dataType: "json"
            }).done(function (msg) {
                jiuXiuLoad.stop();
                if (msg.status == 'success') {
                    alertGood('更新成功!');
                } else {
                    alertWorning(msg.data)
                }
            });
        }

        function updatePasswordForm() {
            if ($("#setting_pwd_box_oldpwd").val() == "") {
                alertWorning('请输入原密码');
                return;
            }
            if ($("#setting_pwd_box_newpwd").val() == "") {
                alertWorning('请输入新密码');
                return;
            }
            if ($("#setting_pwd_box_newpwd").val() != $("#setting_pwd_box_newpwd2").val()) {
                alertWorning('新密码输入不一致');
                return;
            }
            jiuXiuLoad.start();
            $.ajax({
                method: "POST",
                url: "/api/updateUserPassword",
                data: $("#updatePasswordForm").serializeArray(),
                dataType: "json"
            }).done(function (msg) {
                jiuXiuLoad.stop();
                if (msg.status == 'success') {
                    alertGood('更改成功!');
                    document.getElementById("updatePasswordForm").reset();
                } else {
                    alertWorning(msg.data)
                }
            });
        }

        function sendMsgToEmailPhone(inputId, obj) {
            var address = $("#" + inputId).val();
            if (address.length == 0) {
                alertWorning('邮箱不能为空！');
                return;
            }
            jiuXiuLoad.start();
            $.ajax({
                method: "POST",
                url: "/api/sendMsgToEmailPhone",
                data: {address: address},
                dataType: "json"
            }).done(function (msg) {
                jiuXiuLoad.stop();
                if (msg.status == 'success') {
                    $(obj).hide()
                    initTimer = setInterval(function () {
                        countdown('emailTiming', obj)
                    }, 100);
                } else {
                    alertWorning(msg.data)
                }
            });
        }

        function selectSettingBox(type) {
            $(".as_menu_icon").attr("class", "as_triangle_down");
            $(".as_info").attr("class", "as_info");
            $("#setting_" + type + "_bt").attr("class", "as_info as_info_select");
            $("#setting_" + type + "_icon").attr("class", "as_menu_icon zx_icon as_" + type);
            $(".setting_box_div").hide();
            $("#setting_" + type + "_box").show();
        }

        function updateBindPhone() {
            if ($("#setting_phone_box_phonenumber").val() == "") {
                alertWorning('请输入手机号码');
                return;
            }
            if ($("#setting_phone_box_code").val() == "") {
                alertWorning('请输入短信验证码');
                return;
            }
            jiuXiuLoad.start();
            $.ajax({
                method: "POST",
                url: "/api/bindPhone",
                data: $("#updatePhoneForm").serializeArray(),
                dataType: "json"
            }).done(function (msg) {
                jiuXiuLoad.stop();
                if (msg.status == 'success') {
                    alertGood('手机绑定成功!');
                    $("#GetPhoneCodeBt").show();
                    $("#GetPhoneTime").hide();
                    $('#setting_phone_box').find('.from_Centered').eq(1).parent().show();
                    $('#setting_phone_box').find('.from_Centered').eq(0).parent().hide();
                } else {
                    alertWorning(msg.data)
                }
            });
        }

        function updateBindEmail() {
            if ($("#setting_mail_box_mailnumber").val() == "") {
                alertWorning('请输入邮箱地址');
                return;
            }
            if ($("#setting_mail_box_code").val() == "") {
                alertWorning('请输入验证码');
                return;
            }
            jiuXiuLoad.start();
            $.ajax({
                method: "POST",
                url: "/api/bindEmail",
                data: $("#updateEmailForm").serializeArray(),
                dataType: "json"
            }).done(function (msg) {
                jiuXiuLoad.stop();
                if (msg.status == 'success') {
                    alertGood('邮箱绑定成功!');
                    $("#GetEmailCodeBt").show();
                    $("#GetEmailTime").hide();
                    $('#setting_mail_box').find('.from_Centered').eq(1).parent().show();
                    $('#setting_mail_box').find('.from_Centered').eq(0).parent().hide();
                } else {
                    alertWorning(msg.data)
                }
            });
        }

        var timeWait = 60;

        function setCodeTime(btnObj, btnTimeObj, showTimeObj) {
            if (timeWait == 0) {
                $("#" + btnObj).show();
                $("#" + btnTimeObj).hide();
                timeWait = 60;
            } else {
                $("#" + btnObj).hide();
                $("#" + btnTimeObj).show();
                $("#" + showTimeObj).html(timeWait);
                timeWait--;
                setTimeout(function () {
                    setCodeTime(btnObj, btnTimeObj, showTimeObj);
                }, 1000)
            }
        }

        $(function () {
            var currentUrl = window.location.href.split('#')
            if (currentUrl.length > 1) {
                selectSettingBox(currentUrl[1]);
            } else {
                selectSettingBox('basicinfo');
            }

            $("#GetPhoneCodeBt").click(function () {
                if (timeWait == 60) {
                    var phoneNum = $("#setting_phone_box_phonenumber").val();
                    if (phoneNum == "") {
                        alertWorning('请输入手机号码!');
                    } else {
                        jiuXiuLoad.start();
                        $.ajax({
                            method: "POST",
                            url: "/api/sendPhoneCode",
                            data: $("#updatePhoneForm").serializeArray(),
                            dataType: "json"
                        }).done(function (msg) {
                            jiuXiuLoad.stop();
                            if (msg.status == 'success') {
                                timeWait = 60;
                                setCodeTime("GetPhoneCodeBt", "GetPhoneTime", "phoneTiming");
                                alertGood('验证码已发送!');
                            } else {
                                alertWorning(msg.data)
                            }
                        });
                    }
                } else {
                    alertGood('验证码已发送!');
                }
            });

            $("#GetEmailCodeBt").click(function () {
                if (timeWait == 60) {
                    var emailAddress = $("#setting_mail_box_mailnumber").val();
                    if (emailAddress == "") {
                        alertWorning('请输入邮箱地址!');
                    } else {
                        jiuXiuLoad.start();
                        $.ajax({
                            method: "POST",
                            url: "/api/sendEmailCode",
                            data: $("#updateEmailForm").serializeArray(),
                            dataType: "json"
                        }).done(function (msg) {
                            jiuXiuLoad.stop();
                            if (msg.status == 'success') {
                                timeWait = 60;
                                setCodeTime("GetEmailCodeBt", "GetEmailTime", "emailTiming");
                                alertGood('验证码已发送!');
                            } else {
                                alertWorning(msg.data)
                            }
                        });
                    }
                } else {
                    alertGood('验证码已发送!');
                }
            });
        });

    </script>
    <div class="as_fl20_right">
        <div class="as_fl20">
            <h3 class="as_fl20_h3">账号设置:</h3>
            <div class="as_cn">
                <div class="as_menu_icon  zx_icon " id="setting_basicinfo_icon">
                    <a id="setting_basicinfo_bt" class="as_info as_info_select" onclick="selectSettingBox('basicinfo')">基本信息</a>
                </div>
                <div class="as_triangle_down" id="setting_pwd_icon">
                    <a id="setting_pwd_bt" onclick="selectSettingBox('pwd')" class="as_info">密码管理</a>
                </div>
                <div class="as_triangle_down" id="setting_phone_icon">
                    <a id="setting_phone_bt" onclick="selectSettingBox('phone')" class="as_info">手机管理</a>
                </div>
                <div class="as_triangle_down" id="setting_mail_icon">
                    <a id="setting_mail_bt" onclick="selectSettingBox('mail')" class="as_info">邮箱管理</a>
                </div>
            </div>
        </div>
        <div class="as_fr80">
            <div style="padding:0px 20px;">
                <!-- 用户信息 -->
                <form id="userForm">
                    <div id="setting_basicinfo_box" class="setting_box_div" style="text-align: left;  display:block; ">
                        <div class="as_info_xx" style="height:30px"></div>
                        <div class="as_info_xx">
                            <div class="as_info_cns ">姓名：</div>
                            <div class="as_info_cn1" style=" letter-spacing: 2px; color: #444;">
                                <input name="userName" type="text" id="userNmae"
                                       th:value="${session.loginSession.realName}" placeholder="真实姓名"
                                       class="r_inptut inputwd300" style="width: 150px">
                                <div class="r_inptut " id="memberNamelab" style="display: none; width: auto;"></div>
                                <label id="FirstNamelab" class="as_info_tip">*仅允许修改一次，提款人姓名必须与注册姓名一致。</label>
                            </div>

                        </div>
                        <div class="as_info_xx">
                            <div class="as_info_cns">性别：</div>
                            <div class="as_info_cn1">
                                <select name="sex" id="Gender" style="width: 75px; height: 35px; text-align: center;">
                                    <option th:selected="${session.loginSession.sex==1}" value="1">男</option>
                                    <option th:selected="${session.loginSession.sex==2}" value="2">女</option>
                                </select>
                                <span class="as_info_tip">*必填</span></div>
                        </div>
                        <div class="as_info_xx">
                            <div class="as_info_cns">出生日期：</div>
                            <div class="as_info_cn1">
                                <input name="userYear"
                                       th:value="${#strings.substring(session.loginSession.birthday,0,4)}" type="tel"
                                       maxlength="4" id="BYear"
                                       placeholder="年份"
                                       class="r_inptut inputwd140" style="width: 112px;">
                                <select name="userMonth" id="BMonth" class="inputwd140"
                                        style="height: 42px; text-align: center; width: 112px;">
                                    <option th:selected="${#strings.substring(session.loginSession.birthday,5,7) == '01'}"
                                            value="1">1月
                                    </option>
                                    <option th:selected="${#strings.substring(session.loginSession.birthday,5,7) == '02'}"
                                            value="2">2月
                                    </option>
                                    <option th:selected="${#strings.substring(session.loginSession.birthday,5,7) == '03'}"
                                            value="3">3月
                                    </option>
                                    <option th:selected="${#strings.substring(session.loginSession.birthday,5,7) == '04'}"
                                            value="4">4月
                                    </option>
                                    <option th:selected="${#strings.substring(session.loginSession.birthday,5,7) == '05'}"
                                            value="5">5月
                                    </option>
                                    <option th:selected="${#strings.substring(session.loginSession.birthday,5,7) == '06'}"
                                            value="6">6月
                                    </option>
                                    <option th:selected="${#strings.substring(session.loginSession.birthday,5,7) == '07'}"
                                            value="7">7月
                                    </option>
                                    <option th:selected="${#strings.substring(session.loginSession.birthday,5,7) == '08'}"
                                            value="8">8月
                                    </option>
                                    <option th:selected="${#strings.substring(session.loginSession.birthday,5,7) == '09'}"
                                            value="9">9月
                                    </option>
                                    <option th:selected="${#strings.substring(session.loginSession.birthday,5,7) == '10'}"
                                            value="10">10月
                                    </option>
                                    <option th:selected="${#strings.substring(session.loginSession.birthday,5,7) == '11'}"
                                            value="11">11月
                                    </option>
                                    <option th:selected="${#strings.substring(session.loginSession.birthday,5,7) == '12'}"
                                            value="12">12月
                                    </option>
                                </select>
                                <input name="userDay" type="tel" maxlength="2" id="BDay"
                                       th:value="${#strings.substring(session.loginSession.birthday,8,10)}"
                                       placeholder="日期"
                                       class="r_inptut inputwd140" style="width: 112px;">
                                <span class="as_info_tip">*必填</span></div>
                        </div>
                        <div class="as_info_xx">
                            <div class="as_info_cns">收货地址：</div>
                            <div class="as_info_cn1">
                                <form class="form-inline">
                                    <link rel="stylesheet" href="/js/regions/area.css">
                                    <script src="/js/regions/area-data.js"></script>
                                    <script src="/js/regions/area_k.js"></script>
                                    <div class="form-input">
                                        <div class="area-input">
                                            <div class="area province">
                                                <input name="province" type="hidden" id="hd_province" th:attr="value=${session.loginSession.province}">
                                                <span th:text="${session.loginSession.province}">-- 省份 --</span><i></i>
                                                <div class="area-content">
                                                    <div>
                                                        <ul></ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="area city">
                                                <input name="city" type="hidden" id="hd_city" th:attr="value=${session.loginSession.city}">
                                                <span th:text="${session.loginSession.city}">-- 城市 --</span><i></i>
                                                <div class="area-content">
                                                    <ul></ul>
                                                </div>
                                            </div>
                                            <div class="area downtown">
                                                <input name="area" type="hidden" id="hd_downtown" th:attr="value=${session.loginSession.area}">
                                                <span th:text="${session.loginSession.area}">-- 市区 --</span><i></i>
                                                <div class="area-content">
                                                    <ul></ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <script>
                                        Area.init(AreaData);
                                    </script>
                                </form>
                            </div>
                        </div>
                        <div class="as_info_xx">
                            <div class="as_info_cns">街道：</div>
                            <div class="as_info_cn1" style="line-height:40px;">
                                <input name="address" type="text" th:value="${session.loginSession.addressDetails}"
                                       id="Address" class="r_inptut" style="width:520px;">
                                <span class="as_info_tip">请填写真实地址，参加节日活动将获取小礼物。</span></div>
                        </div>
                        <div class="as_info_xx">
                            <div class="as_info_cns">　</div>
                            <div class="as_info_cn1" style="line-height:40px; display:inline-block">
                                <button id="information_bt" type="button"
                                        onclick="updateUserInfo()" class="as_but inputwd300"> 保存
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- 更改密码 -->
                <div id="setting_pwd_box" class="setting_box_div">
                    <form id="updatePasswordForm">
                        <div class="as_info_xx" style="height:30px"></div>
                        <div class="from_Centered">
                            <div class="setting_pwd_box_row"> 原密码 ：
                                <input id="setting_pwd_box_oldpwd" name="oldpassword" class="r_inptut inputwd300"
                                       type="password">
                            </div>
                            <div class="setting_pwd_box_row"> 新密码 ：
                                <input id="setting_pwd_box_newpwd" name="newpassword" class="r_inptut inputwd300"
                                       type="password">
                            </div>
                            <div class="setting_pwd_box_row"> 确认密码：
                                <input id="setting_pwd_box_newpwd2" class="r_inptut inputwd300" type="password">
                            </div>
                            <div class="setting_pwd_box_row">
                                <button id="setting_pwd_box_submit" onclick="updatePasswordForm()"
                                        type="button" class="as_but inputwd300"> 完成
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- 更改邮箱 -->
                <div id="setting_mail_box" class="setting_box_div">
                    <div class="as_info_xx" style="height:30px"></div>
                    <div th:style="${session.loginSession.emailStatus==1? 'display:block':'display:none'}">
                        <div class="from_Centered">
                            <form id="updateEmailForm">
                                <div class="setting_pwd_box_row"> 邮箱地址 ：
                                    <input id="setting_mail_box_mailnumber" name="email" class="r_inptut inputwd300"
                                           type="text" placeholder="请输入邮箱">
                                </div>
                                <div class="setting_pwd_box_row"> 验证码：
                                    <input id="setting_mail_box_code" name="verifyCode" class="r_inptut inputwd300"
                                           type="text" style="width:177px;vertical-align: middle;" placeholder="请输入验证码">
                                    <span class="setting_phone_tip">
                                        <a id="GetEmailCodeBt">获取验证码</a>
                                        <b id="GetEmailTime"><span class="time_sec" id="emailTiming">60</span>s</b>
                                    </span>
                                </div>
                                <div class="setting_pwd_box_row">
                                    <button id="setting_mail_box_submit" type="button" onclick="updateBindEmail()"
                                            class="as_but inputwd300">完成
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div th:style="${session.loginSession.emailStatus==2? 'display:block':'display:none'}">
                        <div class="from_Centered" style="margin:0 auto; text-align:center;">
                            <img src="/images/b1.jpg"><br><br>
                            阁下已绑定的邮箱<br>
                            <span th:text="${session.loginSession.email}"></span><br><br>
                            <a class="bangd"
                               onclick="$('#setting_mail_box').find('.from_Centered').eq(1).parent().hide();$('#setting_mail_box').find('.from_Centered').eq(0).parent().show();">更换绑定的邮箱</a>
                        </div>
                    </div>
                </div>

                <!-- 更改手机号码 -->
                <div id="setting_phone_box" class="setting_box_div">
                    <div class="as_info_xx" style="height:30px"></div>
                    <div th:style="${session.loginSession.phoneStatus==1? 'display:block':'display:none'}">
                        <div class="from_Centered">
                            <form id="updatePhoneForm">
                                <div class="setting_pwd_box_row"> 手机号码：
                                    <input name="phone" id="setting_phone_box_phonenumber" class="r_inptut inputwd300"
                                           type="text" placeholder="请输入手机号码">
                                </div>
                                <div class="setting_pwd_box_row"> 验证码：
                                    <input name="verifyCode" id="setting_phone_box_code" class="r_inptut inputwd300"
                                           type="text" style="width:177px;vertical-align: middle;" placeholder="请输入验证码">
                                    <span class="setting_phone_tip">
                                        <a id="GetPhoneCodeBt">获取验证码</a>
                                        <b id="GetPhoneTime" style="display: none; "><span class="time_sec"
                                                                                           id="phoneTiming">60</span>s</b>
                                    </span>
                                </div>
                                <div class="setting_pwd_box_row">
                                    <button id="setting_phone_box_submit" type="button" onclick="updateBindPhone()"
                                            class="as_but inputwd300">完成
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div th:style="${session.loginSession.phoneStatus==2? 'display:block':'display:none'}">
                        <div class="from_Centered" style="margin:0 auto; text-align:center;">
                            <img src="/images/b2.jpg"><br><br>
                            阁下已绑定的手机<br>
                            <span th:text="${session.loginSession.phone}"></span><br><br>
                            <a class="bangd"
                               onclick="$('#setting_phone_box').find('.from_Centered').eq(1).parent().hide();$('#setting_phone_box').find('.from_Centered').eq(0).parent().show();">更换绑定的手机</a>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>